<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>手机登录</title>
		<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../lib/layui/css/login.css" />
		<script type="text/javascript" src="../lib/layui/layui.js"></script>
	</head>

	<body>
		<div class="login-wrapper">
			<div class="login-body">
				<div class="layui-card">
					<!--头部-->
					<div class="layui-card-header">
						<i class="layui-icon layui-icon-cellphone"></i>&nbsp;&nbsp;手机登录
					</div>
					<!--主体部分-->
					<div class="layui-card-body layui-form layui-form-pane">
						<!--手机号-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-cellphone"></i></label>
							<div class="layui-row inline-block">
								<div class="layui-col-xs6">
									<input name="telphone" type="text" required lay-verify="required|phone" autocomplete="off" placeholder="手机号" class="layui-input">
								</div>
								<div class="layui-form-mid" style="color: red;">*</div>
								<div class="layui-col-xs5">
									<button class="layui-btn layui-btn-normal layui-btn-radius" lay-filter="code-submit" lay-submit>验证码</button>
								</div>
							</div>
						</div>
						<!--验证码-->
						<div class="layui-form-item">
							<label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
							<div class="layui-input-inline">
								<input name="otpcode" type="text" autocomplete="off" placeholder="验证码" class="layui-input">
							</div>
							<div class="layui-form-mid " style="color: red;">*</div>
							<!--<div class="layui-col-xs5" style="padding-left: 10px;">
										<img class="login-captcha" src="https://www.oschina.net/action/user/captcha">
									</div>-->
						</div>
						<!--注册和忘记密码-->
						<div class="layui-form-item">
							<!--<a href="register.html" class="layui-link">帐号注册</a>-->
							<a href="forget.html" class="layui-link pull-right">忘记密码？</a>
						</div>
						<div class="layui-form-item">
							<button lay-filter="login-submit" class="layui-btn layui-btn-fluid layui-btn-radius" lay-submit>登 录</button>
						</div>
						<hr />
						<div class="layui-form-item login-other">
							<div>
								<label>其他登录方式</label>
							</div>
							<div>
								<a href="login.html" title="账号登录"><i class="layui-icon layui-icon-home"></i></a>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
								<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script>
			layui.config({
				base: 'module/'
			}).use(['form'], function() {
				var $ = layui.jquery;
				var form = layui.form;
				
				//鼠标悬停提示效果
//				var tip_index = 0;
//    			$("#loginhome").hover(function(){
//					tip_index=layer.tips('账号登录',this,{time:0});
//				},function(){
//					layer.close(tip_index);
//				});


				//验证码
				form.on('submit(code-submit)', function(obj) {
					var field = obj.field;
//					layer.load(2);
					$.ajax({
						url: 'http://localhost:8080/user/getotp',
						data: field,
						contentType: "application/x-www-form-urlencoded",
						type: 'POST',
						xhrFields: {
							withCredentials: true
						},
						success: function(data) {
							if(data.status == "success") {
								layer.msg('手机验证码已经发送到手机上',{
									icon:1,
									time:1000
								});
							} else {
								layer.msg(data.data.errMsg, {
									icon: 5,
									time:1000
								});
							}
						},
						error: function(xhr) {
							console.log('error');
							console.log(xhr);
							layer.msg('请按F12查看控制台信息', {
								icon: 5,
								time:1000
							});
						}
					});
				})
				// 表单提交
				form.on('submit(login-submit)', function(obj) {
					var field = obj.field;
					$.ajax({
						url: 'http://localhost:8080/user/loginbyphone',
						data: field,
						contentType: "application/x-www-form-urlencoded",
						type: 'POST',
						xhrFields: {
							withCredentials: true
						},
						success: function(data) {
							if(data.status == "success") {
								layer.msg('登录成功', {
									icon: 1,
									time: 1000
								}, function() {
									//登录后不可再返回登录页
									//location.replace('index.html');
									location.href = "index.html";
								});
							} else {
								layer.msg(data.data.errMsg, {
									icon: 5
								});
							}
						},
						error: function(xhr) {
							console.log('error');
							console.log(xhr);
							layer.msg('请按F12查看控制台信息', {
								icon: 5
							});
						}
					});
				});
			});
		</script>
	</body>

</html>